<template>
    <div class="shareImg">
        <div style="display:none; width:80%"><img src="../../static/img/th.png" style="width:100%" alt=""></div>
        <!-- <transition name="screenSwitch">
            <div class="filter_box" v-show="screenSwitch" @click="closeScreenSwitch">
                <transition name="screenSwitchCon">
                    <div v-show="screenSwitchCon" class="filter_box_con">
                        <p class="filter_box_con_title">邀请好友,得200积分</p>
                        <ul class="shareBox">
                            <li @click.stop="shareWb()">
                                <img src="../../static/img/sharexinlang.png" alt="">
                                <span>微博</span>
                            </li>
                            <li @click.stop="shareQQ()">
                                <img src="../../static/img/shareQQ.png" alt="">
                                <span>QQ</span>
                            </li>
                            <li @click.stop="shareHy()">
                                <img src="../../static/img/sharewx.png" alt="">
                                <span>微信好友</span>
                            </li>
                            <li @click.stop="sharePyq()">
                                <img src="../../static/img/sharepyq.png" alt="">
                                <span>朋友圈</span>
                            </li>
                            <li @click.stop="downLoadImg()">
                                <img src="../../static/img/sharedownLoad.png" alt="">
                                <span>下载</span>
                            </li>
                        </ul>
                    </div>
                </transition>
            </div>
        </transition> -->
        <div class="filter_box2" v-show="screenSwitch2" v-loading="screenSwitch2" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        </div>
        <div class="filter_box2" v-show="screenSwitch3" v-loading="screenSwitch3" element-loading-text="图片生成中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        </div>
        <div class="goBack">
            <img src="" alt="">
        </div>
        <p class="active_rule" @click="toActiveRule()">活动规则</p>
        <div class="box">
            <h1>邀请好友&nbsp;得200积分</h1>
            <div id="activityDiv">
                <swiper :options="swiperOption" ref="mySwiper" id="activityUl" class=''>
                    <swiper-slide class="swiper-slide games activityLi" v-for="(item,index) in listData" :key="index" ref="mySwiperItem">
                        <div class='swiper-slide_con' @click="toEditImg()">
                            <div class="backImg" :style="{backgroundImage:'url('+item.img+')' }">
                                <div ref="isEditImg">
                                    <label ref="btnOrange" class="btn btn-orange" for="uploads" ><span> 点击制作图片</span><img src="../../static/img/pointer.png"/></label>
                                    <!-- <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change.stop="uploadImg($event, 1,index)"> -->
                                </div>
                                <div class="text">
                                    <p class="text_con" ref="textCon">{{item.text}}</p>
                                    <p class="autograph" ref="autograph">{{item.autograph}}</p>
                                </div>

                                <!-- <textarea @focus="setClickOnce()" name="activityLiText" id="activityLiText" cols="30" rows="4" v-model.trim="item.activityLiText"></textarea> -->
                            </div>
                            <div class="liBottom">
                                <div class="liText">
                                    <p class="liTtitle">大家好 我是{{myUserInfo.nickname}}</p>
                                    <p class="liDes">我将以公益之心服务人民</p>
                                    <p class="liDes">以文明作城市之魂奉献社会</p>
                                </div>
                                <div class="QRcode" ref="qrcode">
                                    <img :src="qrcodeImg" alt="">
                                </div>
                            </div>
                        </div>
                    </swiper-slide>
                </swiper>
                <p class="peopleNum" @click="toInvitationRecord()">你已成功邀请{{peopleNum}}位好友加入畅享>></p>
                <div id="canvasImg"></div>
            </div>
            <p class="invitation_btn" id="invitationBtn" @click="downLoadImg()">长按保存</p>
        </div>
        <div class="line line_box" v-if="lineBoxSwitch">
            <div class="cropper-content" style=" margin-top:-60px;margin-left:260px;">
                <div class="cropper">
                    <VueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" @imgLoad="imgLoad" @cropMoving="cropMoving"></VueCropper>
                </div>
            </div>
            <div class="btnBottom">
                <input type="button" class="btn btn_cance" value="取消" @click="cancelUploadBtn()">
                <input type="button" class="btn btn_blue" value="确定" @click="finish()">
            </div>
        </div>
    </div>
</template>

<script>
    import {
        swiper,
        swiperSlide
    } from "vue-awesome-swiper";
    import wx from "weixin-js-sdk";
    import {
        weiXinConfig,
        weiXinShare
    } from "../assets/js/wxJsApi";
    import {
        VueCropper
    } from "vue-cropper";
    export default {
        name: "shareImg",
        components: {
            VueCropper
        },
        data() {
            const _self = this;
            return {
                token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
                tokenParams: {
                    token: localStorage.getItem("token") ?
                        localStorage.getItem("token") : ""
                },
                  myUserInfo:{},
                listData: [{
                        lititle: "我是一抹蓝1",
                        img: require("../../static/img/cart1.png"),
                        // activityLiText: "每一个不曾起舞的日子，都是对生命的辜负。",
                        text:'每一个不曾起舞的日子，都是对生命的辜负。',
                        autograph:'——尼采'
                    },
                    {
                        lititle: "我是一抹蓝2",
                        img: require("../../static/img/cart2.png"),
                        // activityLiText: "哪里会有人喜欢孤独，不过是不喜欢失望。——村上春树",
                        text:'哪里会有人喜欢孤独，不过是不喜欢失望。',
                        autograph:'——村上春树'
                    },
                ],
                liWidth: 0,
                liNum: 0,
                startX: 0,
                endX: 0,
                currantIndex: 0,
                test: false,
                peopleNum: 0 /*成功邀请好友数 */ ,
                activityLiText: "" /*编辑的文字 */ ,
                swiperOption: {
                    // activeIndex: 4,
                    slideActiveClass: "add_transform",
                    slideDuplicateClass: "remove_transform",
                    slideNextClass: "remove_transform",
                    slidePrevClass: "remove_transform",
                    //   width:"638",
                    autoplay: false /*是否自动循环*/ ,
                    speed: 500, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    // loop: true, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    setWrapperSize: false, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: false, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: ".swiper-scrollbar",
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    pagination: {
                        el: ".swiper-pagination", // type : 'progressbar', //分页器形状
                        clickable: true //点击分页器的指示点分页器会控制Swiper切换
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    on: {
                        init() {
                            // this.activeIndex = 4
                        },
                        slideChangeTransitionEnd(){
                            _self.currantIndex = this.activeIndex;
                            console.log(_self.currantIndex)
                        },
                        touchStart() {
                            
                        }
                    }
                },
                screenSwitch: false,
                screenSwitchCon: false,
                screenSwitch2: false,
                screenSwitch3: false,
                bgName: "" /*当前图片名字 */ ,
                imgUrl: "" /*下载图片地址 */ ,
                clickOnce: 0 /*控制下载图片按钮不能连续点击 */ ,
                /********** */
                bgImg: "",
                //剪切图片上传
                crap: false,
                previews: {},
                option: {
                    img: "",
                    outputSize: 1, //剪切后的图片质量（0.1-1）
                    full: false, //输出原图比例截图 props名full
                    outputType: "png",
                    original: false,
                    canMoveBox: true,
                    canMove: true,
                    canScale: true,
                    autoCrop: true,
                    autoCropWidth: 618,
                    autoCropHeight: 704,
                    fixedBox: true,
                    cropData: {}
                },
                fileName: "", //本机文件地址
                downImg: "#",
                imgFile: "",
                uploadImgRelaPath: "", //上传后的图片的地址（不带服务器域名）,
                lineBoxSwitch: false,
                thisNode: '',
                /*点击的当前节点 */
                cartInfo: {
                    bgImg: '',
                    nickname: '',
                    text: '',
                    autograph: '',
                },
                WxConfig:{},
                qrcodeImg:require('../../static/img/qrcode.jpg'),
            };
        },
        created() {
            if (this.token && this.token !== "") {
                this.wxShare();
                this.getInviteCount();
                this.getUserInfo();
                this.getQrcodeImg();
            } else {
                this.wxSignIn();
            }
        },
        mounted(){
            this.isEditImgPage();
            
        },
        methods: {
            /*判断是否从制作图片完成时返回过来 */
            isEditImgPage(){
                if(this.$route.query.editFilish && localStorage.getItem('cartInfo')){
                    this.$nextTick(()=>{
                        let isEditImg=this.$refs.isEditImg;
                        isEditImg[0].style.display='none';
                    })
                    this.screenSwitch=true;
                    this.screenSwitchCon=true;
                    this.cartInfo=JSON.parse(localStorage.getItem('cartInfo'));
                    let activeBgImg=JSON.parse(localStorage.getItem('cartInfo')).bgImg.split('url(\"')[1].split('\")')[0];
                    
                    this.listData[0].img=activeBgImg;
                    this.listData[0].text=JSON.parse(localStorage.getItem('cartInfo')).text;
                    this.listData[0].autograph=JSON.parse(localStorage.getItem('cartInfo')).autograph;
                    this.listData[0].nickname=JSON.parse(localStorage.getItem('cartInfo')).nickname;
                    
                }else{
                    this.screenSwitch=false;
                    this.screenSwitchCon=false;
                }
            },
            /*点击其他地方关闭弹窗 */
            closeScreenSwitch(){
                this.screenSwitch=false;
                    this.screenSwitchCon=false;
            },
            /*获取个人信息 */
            getUserInfo(){
                if(localStorage.getItem('myUserInfo')){
                    this.myUserInfo=JSON.parse(localStorage.getItem('myUserInfo'));
                }
            },
            /*获取二维码图片*/
            getQrcodeImg(){
                this.axios.post(this.APIHOST + "home/appQrcode", this.tokenParams).then(r=>{
                    if(r.data){
                        this.qrcodeImg=r.data.data
                    }else{
                        this.qrcodeImg= require('../../static/img/qrcode.jpg')
                    }
                })
            },

            // uploadBgImg(event) {
            //     let srcEl = event.target || event.srcElement;
            //     this.thisNode = srcEl.parentNode.parentNode
            // },
            //选择本地图片
            uploadImg(e, num, index) {
                var _this = this;
                //上传图片
                var file = e.target.files[0];
                _this.fileName = file.name;
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
                    return false;
                }
                var reader = new FileReader();
                reader.onload = e => {
                    let data = e.target.result;
                    if (num === 1) {
                        _this.option.img = data;
                    } else if (num === 2) {
                        _this.example2.img = data;
                    }
                    this.lineBoxSwitch = true;
                };
                // 转化为base64
                reader.readAsDataURL(file);
            },
            imgLoad(msg) {
                console.log("imgLoad");
                console.log(msg);
            },
            cropMoving(data) {
                this.option.cropData = data;
            },
            //上传图片（点击上传按钮）
            finish() {
                this.screenSwitch3 = true;
                this.lineBoxSwitch = false;
                let _self = this;
                let formData = new FormData();
                this.$refs.cropper.getCropBlob(val => {
                    let imgBlob = window.URL.createObjectURL(val);
                    let imgData;
                    let reader = new window.FileReader();
                    reader.readAsDataURL(val);
                    reader.onloadend = function() {
                        imgData = reader.result;
                        formData.append("image", val, _self.fileName);
                        let uploadParams = {
                            file: imgData,
                            token: _self.token
                        };
                        _self.axios
                            .post(_self.APIHOST + "upload/uploadFile", uploadParams)
                            .then(r => {
                                if (r.data.code === "0") {
                                    _self.screenSwitch3 = false;
                                    _self.imgFile = "";
                                    _self.bgImg = r.data.data.path2; /*上传返回来的url */
                                    _self.thisNode.parentNode.style.backgroundImage = "url(" + r.data.data.path2 + ")";
                                    _self.$p_message("生成图片成功", "success");
                                } else {}
                                _self.screenSwitch3 = false;
                            }).catch(res=>{
                                        this.$message.error("出错啦,请稍后再试");
                                        setTimeout(() => {
                                        if(_self.screenSwitch3 == true)
                                            _self.screenSwitch3 = false;
                                        }, 1000);
                                    });;
                    }
                });
            },
            realTime(data) {
                this.previews = data;
            },
            //线下登录测试
            // wxSignIn() {
            //     let REDIRECT_URI = encodeURI('http://xcx.bluecoord.com/');
            //     let URI = window.location.href;
            //     if (!URI.match(/code/gi)) {
            //         /*没跳转之前 */
            //         localStorage.setItem('isLocation', 'isLocation'); /*用于解决城市定位只定位一次 */
            //         window.location.href =
            //             "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            //             this.APPID +
            //             "&response_type=code&scope=snsapi_userinfo&state=123&redirect_uri=" +
            //             REDIRECT_URI +
            //             "#wechat_redirect"; /*hash模式带有#会被微信截取掉,这里将重定向地址放在最后 */
            //     } else {
            //         if (URI.match(/wx\/\?code/)) {
            //             /*将code参数放在路由hash后面去，以防参数在hash前面导致页面路径不对 */
            //             let codeUrl = URI.split("wx/")[1].split("#/")[0];
            //             window.location.href = URI.split("wx/")[0] + 'wx/?#/' + codeUrl
            //         } else {
            //             let wxCodeParams = {
            //                 code: URI.split("code=")[1].split("&")[0] //this.$route.query.code
            //             };
            //             this.axios
            //                 .post(this.APIHOST + "home/login2", wxCodeParams)
            //                 .then(r => {
            //                     if (r.data.code === "0") {
            //                         this.$store.commit("setToken", r.data.data.token);
            //                         this.token = r.data.data.token;
            //                         this.tokenParams = {
            //                                 token: r.data.data.token
            //                             },
            //                             this.$store.commit("setMyUserInfo", r.data.data);
            //                         this.myUserInfo = JSON.parse(
            //                             localStorage.getItem("myUserInfo")
            //                         );
            //                         localStorage.removeItem('isLocation');
            //                         this.wxShare();
            //                         this.getInviteCount();
            //                         this.getUserInfo();
            //                         this.getQrcodeImg();
            //                     }
            //                     if (r.data.code === "1010") {
            //                         this.$p_message(r.data.msg);
            //                     }
            //                 })
            //                 ;
            //         }
            //     }
            // },
            //线上登录
            wxSignIn() {
                let REDIRECT_URI = encodeURI(window.location.href);
                if (!REDIRECT_URI.match(/code/gi)) {
                    /*没跳转之前 */
                    localStorage.setItem('isLocation', 'isLocation'); /*用于解决城市定位只定位一次 */
                    window.location.href =
                        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                        this.APPID +
                        "&response_type=code&scope=snsapi_userinfo&state=123&redirect_uri=" +
                        REDIRECT_URI +
                        "#wechat_redirect"; /*hash模式带有#会被微信截取掉,这里将重定向地址放在最后 */
                } else {
                    // if (REDIRECT_URI.match(/wx\/\?code/)) {
                    //     /*将code参数放在路由hash后面去，以防参数在hash前面导致页面路径不对 */
                    //     let codeUrl = REDIRECT_URI.split("wx/")[1].split("#/")[0];
                    //     window.location.href = REDIRECT_URI.split("wx/")[0] + 'wx/?#/' + codeUrl
                    // } else {
                        let wxCodeParams = {
                            code: REDIRECT_URI.split("code=")[1].split("&")[0] //this.$route.query.code
                        };
                        this.axios
                            .post(this.APIHOST + "home/login2", wxCodeParams)
                            .then(r => {
                                if (r.data.code === "0") {
                                    this.$store.commit("setToken", r.data.data.token);
                                    this.token = r.data.data.token;
                                    this.tokenParams = {
                                            token: r.data.data.token
                                        },
                                        this.$store.commit("setMyUserInfo", r.data.data);
                                    this.myUserInfo = JSON.parse(
                                        localStorage.getItem("myUserInfo")
                                    );
                                    localStorage.removeItem('isLocation');
                                    this.wxShare();
                                    this.getInviteCount();
                                    this.getUserInfo();
                                    this.getQrcodeImg();
                                }
                                if (r.data.code === "1010") {
                                    this.$p_message(r.data.msg);
                                }
                            });
                    // }
                }
            },
            toActiveRule() {
                this.$router.push("/wx/activeRule");
            },
            /*初始生成二维码*/
            // qrcode() {
            //   let qrcodeWidth = document.querySelectorAll(".QRcode")[0].offsetWidth;
            //   let qrcodeHeight = document.querySelectorAll(".QRcode")[0].offsetHeight;
            //   let activityLi = document.querySelectorAll(".activityLi");
            //   activityLi.forEach(item => {
            //     let qrcode = new this.QRCode(item.children[0].children[1].children[1], {
            //       width: qrcodeWidth,
            //       height: qrcodeHeight, // 高度
            //       text: "12345678", // 二维码内容,
            //       render: "canvas" // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            //     });
            //   });
            // },
            setClickOnce() {
                this.clickOnce = 0;
            },
            /*分享按钮 */
            shareBtn() {
                this.$refs.btnOrange[this.currantIndex].style.display = "none";
                this.screenSwitch = true;
                this.screenSwitchCon = true;
            },

            /*下载图片*/
            downLoadImg() {
                let isEditImg=this.$refs.isEditImg;
                isEditImg[0].style.display='none';
                if(this.currantIndex===0 && localStorage.getItem('cavasImg')){
                    /*分享按钮中的下载图片 ,由制作好图片后返回到本页面调用的*/
                    window.location.href=localStorage.getItem('cavasImg');
                }else{
                let _self = this;
                this.screenSwitch2 = true;
                this.screenSwitch = false;
                this.screenSwitchCon = false;
                let canvasImg = document.querySelector("#canvasImg");
                let activeBox = document.querySelector(".add_transform");
                let activeBoxChildren = document.querySelector(".add_transform")
                    .children[0];
                let activeBoxChildrenWidth = activeBoxChildren.offsetWidth;
                let activeBoxChildrenHeight = activeBoxChildren.offsetHeight;
                setTimeout(() => {
                    let createdImg = document.querySelectorAll(".createdImg");
                    if (createdImg) {
                        createdImg.forEach(item => {
                            canvasImg.removeChild(item);
                        });
                    }
                    _self
                        .html2canvas(activeBox, {
                            scale: 2,
                            logging: false,
                            useCORS: true
                        })
                        .then(canvas => {
                            let img = new Image();
                            img.src = canvas.toDataURL("image/jpeg");
                            img.setAttribute("class", "createdImg");
                            img.setAttribute("width", activeBoxChildrenWidth);
                            img.setAttribute("height", activeBoxChildrenHeight);
                            canvasImg.appendChild(img);
                            let uploadParams = {
                                file: img.src,
                                token: this.token
                            };
                            if (_self.clickOnce == 0) {
                                _self.axios
                                    .post(_self.APIHOST + "upload/uploadFile", uploadParams)
                                    .then(r => {
                                        if (r.data.code == "0") {
                                            _self.imgUrl = r.data.data.path2;
                                            _self.screenSwitch2 = false;
                                            _self.clickOnce = 1;
                                            setTimeout(function() {
                                                window.location.href = r.data.data.path2;
                                            }, 500);
                                        } else {
                                            this.$message.error("下载图片失败，请稍后重试");
                                            setTimeout(() => {
                                                _self.screenSwitch2 = false;
                                            }, 1000);
                                        }
                                    })
                                    .catch(res=>{
                                        this.$message.error("出错啦,请稍后再试");
                                        setTimeout(() => {
                                        if(_self.screenSwitch2 == true)
                                            _self.screenSwitch2 = false;
                                        }, 1000);
                                    });
                            } else {
                                this.$message.error("请不要连续下载同张图片");
                                 
                            }
                        });
                }, 100);
                let bgImage = activeBox.children[0].children[0].style.backgroundImage;
                let imgNameList=bgImage.split("/")
                let imgName=imgNameList[imgNameList.length-1]
                this.bgName = imgName.split('")')[0];
                }

            },
            cancelUploadBtn() {
                this.lineBoxSwitch = false;
            },
            /*取消按钮 */
            cancleBtn() {
                this.$refs.btnOrange[this.currantIndex].style.display = "block";
                this.screenSwitch = false;
                this.screenSwitchCon = false;
            },
            /*获取邀请人数量 */
            getInviteCount(){
                this.axios.post(this.APIHOST + "home/getInviteCount",this.tokenParams).then(r=>{
                    if(r.data.code=='0'){
                        this.peopleNum=r.data.data.count;
                    }else{
                        this.peopleNum=0;
                    }
                })
            },
            toInvitationRecord(){
                this.$router.push('/wx/invitationRecord')
            },
            /*微信分享 */
            async wxShare() {
                let _self = this;
                
                let currentUrl = encodeURI(window.location.href.split("#")[0]);
                let wxShareUrl =
                    window.location.href.split("#")[0] +
                    "?share" +
                    window.location.href.split("#")[1];
                let wxAuthParams = {
                    url: currentUrl,
                    token: this.token
                };
                await this.axios
                    .post(this.APIHOST + "home/wechatJssdk", wxAuthParams)
                    .then(r => {
                        if (r.data.code === "0") {
                            this.WxConfig = r.data.data;
                        }
                    });
                await weiXinConfig(this.WxConfig);
                weiXinShare(
                    "",
                    wxShareUrl,
                    "http://xcx.bluecoord.com/wx/static/img/th.png",
                    "我为城市代言",
                    _self
                );
            },
            shareWb(){
                wx.ready(function(){
                    wx.onMenuShareWeibo({
                        title: '畅享图书汇',
                        desc: '',
                        link: '',
                        imgUrl: localStorage.getItem('cavasImg'), 
                        dataUrl: '', 
                        success:  ()=> { 
                            this.$message.success("分享成功");
                        },
                        cancel:  ()=> { 
                            this.$message.error("取消分享");
                        }
                    });
                });
            },
            shareQQ(){
                wx.ready(function(){
                    wx.onMenuShareQQ({
                        title: '畅享图书汇',
                        desc: '',
                        link: '',
                        imgUrl: localStorage.getItem('cavasImg'), 
                        dataUrl: '', 
                        success:  ()=> { 
                            this.$message.success("分享成功");
                        },
                        cancel:  ()=> { 
                            this.$message.error("取消分享");
                        }
                    });
                });
            },
            shareHy(){
                wx.ready(function(){
                    wx.onMenuShareAppMessage({
                        title: '畅享图书汇',
                        desc: '',
                        link: '',
                        imgUrl: localStorage.getItem('cavasImg'), 
                        dataUrl: '', 
                        success:  ()=> { 
                            this.$message.success("分享成功");
                        },
                        cancel:  ()=> { 
                            this.$message.error("取消分享");
                        }
                    });
                });
            },
            sharePyq(){
                wx.ready(function(){
                wx.onMenuShareTimeline({
                    title: '畅享图书汇',
                    link: '',
                    imgUrl: localStorage.getItem('cavasImg'), 
                    success:  ()=> { 
                         this.$message.success("分享成功");
                    },
                    cancel:  ()=> { 
                        this.$message.error("取消分享");
                    }
                });
                
            });
            },
            /*去制作图片页面 */
            toEditImg(){
                this.cartInfo.bgImg=`url(\"${this.listData[this.currantIndex].img}\")`;
                this.cartInfo.text=this.listData[this.currantIndex].text;
                this.cartInfo.autograph=this.listData[this.currantIndex].autograph;
                this.cartInfo.nickname=this.myUserInfo.nickname;
                this.$store.commit('setCartInfo',this.cartInfo);
                if(this.$route.query.editFilish && localStorage.getItem('cartInfo') && this.currantIndex==0){
                    this.$router.push({path:'/wx/editImg',query:{editFilish:'editFilish'}})
                }else{
                    this.$router.push('/wx/editImg')
                }
            },
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
    @import url(../assets/less/public.less);
    .shareImg {
        @font16();
        .active_rule {
            @font12();
            @color1();
            position: absolute;
            right: 0;
            top: 24px;
            height: 52px;
            width: 112px;
            line-height: 52px;
            text-align: center;
            border-top-left-radius: 26px;
            border-bottom-left-radius: 26px;
            background: @config_bg5;
        }
        .box {
            margin-top: 76px;
            overflow: hidden;
            h1 {
                @font24();
                @color_3();
                font-weight: bold;
                margin-bottom: 40px;
            }
            .peopleNum {
                text-align: center; 
                margin: 72px auto 52px;
                @font14();
                @color_5();
            }
            #canvasImg {
                width: 0;
                height: 0;
                overflow: hidden;
            }
            .invitation_btn {
                width: 690px;
                height: 102px;
                background: @config_bg5;
                @color1();
                line-height: 102px;
                text-align: center;
                border-radius: 102px;
                margin: 0 auto;
                @font15();
                margin: 0 auto 52px;
            }
            #activityDiv {
                padding-left: 60px;
                padding-right: 60px;
                box-sizing: border-box;
                .swiper-container {
                    overflow: inherit;
                }
                #activityUl {
                    position: relative;
                    left: 0;
                    height: 916px;
                    transition: all 0.35s ease-in-out;
                    .activityLi {
                        float: left;
                        .swiper-slide_con {
                            width: 618px;
                            margin: 0 auto;
                            height: 916px;
                            border-radius: 20px;
                            overflow: hidden;
                            background: @config_bg1;
                            position: relative;
                            @inputTextarea();
                            box-shadow: 0 5px 25px 0 rgba(201, 206, 210, 0.4);
                        }
                        .backImg {
                            height: 704px;
                            width: 100%;
                            background-size: 100%;
                            display: table;
                            background-repeat: no-repeat;
                            position: relative;
                            .btn-orange {
                                cursor: pointer;
                                position: relative;
                                width: 100%;
                                text-align: center;
                                height: 200px;
                                font-size: 40px;
                                background: none;
                                color: #ffffff;
                                padding-bottom: 10px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                                span {
                                    margin-bottom: 60px;
                                }
                                img {
                                    position: absolute;
                                    top: 50px;
                                    left: 47%;
                                    animation: imgAnimate 0.6s infinite alternate;
                                }
                            }
                            @keyframes imgAnimate {
                                from {
                                    top: 90px;
                                }
                                to {
                                    top: 110px;
                                }
                            }
                            // #activityLiText {
                            //     background: none;
                            //     @color1();
                            //     @font16();
                            //     display: block;
                            //     width: 540px;
                            //     padding: 100px 50px;
                            //     line-height: 1.7em;
                            // }
                    .text {
                            box-sizing: border-box;
                            padding: 100px 4%;
                            color: #ffffff;
                            position: absolute;
                            top: 15vh;
                            left: 0;
                            .text_con {
                                @font16();
                                text-align: left;
                            }
                            .autograph {
                                text-align: right;
                            } // position: absolute;
                            // top: 30%;
                        }
                        }
                        .liBottom {
                            @flex();
                            @justify5();
                            padding: 30px 40px;
                            box-sizing: border-box;
                            .liText {
                                text-align: left;
                                .liTtitle {
                                    @font16();
                                    @color_4();
                                    margin-bottom: 10px;
                                }
                                .liDes {
                                    @font12();
                                    @color_5();
                                    line-height: 1.6em;
                                }
                            }
                            .QRcode {
                                width: 132px;
                                height: 132px;
                                background: @config_bg2;
                                overflow: hidden;
                                img {
                                    width: 100%;
                                }
                            }
                        }
                    }
                    .remove_transform {
                        transform: translateY(50px);
                        -ms-transform: translateY(50px);
                        /* IE 9 */
                        -moz-transform: translateY(50px);
                        /* Firefox */
                        -webkit-transform: translateY(50px);
                        /* Safari 和 Chrome */
                        -o-transform: translateY(50px);
                        /* Opera */
                        transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        /* Firefox 4 */
                        -webkit-transition: all 0.5s ease-in-out;
                        /* Safari 和 Chrome */
                        -o-transition: all 0.5s ease-in-out;
                        /* Opera */
                    }
                    .add_transform {
                        transform: translateY(0);
                        -ms-transform: translateY(0);
                        /* IE 9 */
                        -moz-transform: translateY(0);
                        /* Firefox */
                        -webkit-transform: translateY(0);
                        /* Safari 和 Chrome */
                        -o-transform: translateY(0);
                        /* Opera */
                        transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        /* Firefox 4 */
                        -webkit-transition: all 0.5s ease-in-out;
                        /* Safari 和 Chrome */
                        -o-transition: all 0.5s ease-in-out;
                        /* Opera */
                    }
                }
            }
        }
        /*******/
        .wrapper {
            position: fixed;
            width: 100%;
            top: 0;
            height: calc(100% - 50px);
        }
        .vue-cropper {
            background: black;
            background-image: none !important;
        }
        .btn {
            height: 50px;
            background: #565656;
            width: 100%;
            padding: 0 15px;
        }
        .btn a {
            color: white;
            font-size: 0.16rem;
            display: inline-block;
            line-height: 50px;
        }
        .btn a:nth-of-type(1) {
            float: left;
        }
        .btn a:nth-of-type(2) {
            float: right;
        }
        /*******/
        .line_box {
            position: fixed;
            z-index: 999;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .cropper-content {
                width: 618px;
                height: 704px;
                margin: 0 !important;
                .cropper {
                    width: 618px;
                    height: 704px;
                }
            }
            .btnBottom {
                display: flex;
                width: 60%;
                justify-content: center;
                align-items: center;
                .btn_blue {
                    color: #ffffff;
                    background: @config_bg5;
                    border: none;
                    width: 30%;
                    height: 80px;
                    margin-top: 40px;
                    border-radius: 8px;
                    outline: none;
                }
                .btn_cance {
                    margin-right: 30px;
                    color: @config_bg5;
                    background: #ffffff;
                    border: none;
                    width: 30%;
                    height: 80px;
                    margin-top: 40px;
                    border-radius: 8px;
                    outline: none;
                }
            }
        }
        .filter_box {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            .filter_box_con {
                width: 90%;
                // height: 200px;
                position: absolute;
                right: 0;
                left: 50%;
                top: 50%;
                margin-left: -45%;
                margin-top: -100px;
                background: @config_bg1;
                box-sizing: border-box;
                border-radius: 8px;
                .shareBox{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 20px 40px;
                    li{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-direction: column;
                    }
                }
                .filter_box_con_title {
                    margin: 20px 0 40px;
                    @font16();
                }
                .filter_box_con_btn {
                    width: 60%;
                    margin: 0 auto;
                    @flex();
                    @justify4();
                    span {
                        border: 2px solid @config-bg8;
                        padding: 8px 30px;
                        border-radius: 8px;
                    }
                    span:first-child {
                        border-color: @config_bg5;
                        background: @config_bg5;
                        @color1();
                    }
                } //   .filter_box_con_c {
                //     @flex();
                //     @justify5();
                //     padding: 20px 30px;
                //     li {
                //       p {
                //         width: 80px;
                //         height: 80px;
                //         background: @config_bg2;
                //         border-radius: 8px;
                //         margin: 0 auto 10px;
                //         img {
                //           width: 100%;
                //         }
                //       }
                //     }
                //   }
            }
        }
        /deep/ .el-loading-spinner {
            .el-icon-loading {
                @color1();
            }
            .el-loading-text {
                @color1();
                @font14();
            }
        }
        .filter_box2 {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100vh;
            @flex();
            @justify2();
            flex-direction: column;
            z-index: 9;
        }
        .screenSwitch-enter,
        .screenSwitch2-enter,
        .screenSwitch3-enter {
            opacity: 0;
        }
        .screenSwitch-enter-active,
        .screenSwitch2-enter-active,
        .screenSwitch3-enter-active {
            transition: all 0.1s;
            opacity: 1;
        }
        .screenSwitch-leave-active,
        .screenSwitch2-leave-active,
        .screenSwitch3-leave-active {
            transition: all 0.5s;
            opacity: 0;
        }
        .screenSwitchCon-enter-active {
            opacity: 1;
            transition: all 0.4s ease;
        }
        .screenSwitchCon-leave-active {
            transition: all 0.3s ease;
        }
        .screenSwitchCon-enter {
            opacity: 0;
            transform: translateY(-2.66666667rem);
        }
        .screenSwitchCon-leave-active {
            opacity: 0;
            transform: translateY(-2.66666667rem);
        }
    }
</style>

